<template>
    <router-link class="nav-item" :to="link" :class="{'circle':type=='circle',
                                                      'plain':type=='plain' ,
                                                      'grey':type=='grey',
                                                      'blue':color=='blue',
                                                      'red':color=='red',
                                                      'green':color=='green',
                                                      'orange':color=='orange',
                                                      'purple':color=='purple',
                                                      'pink':color=='pink',
                                                      'teal':color=='teal'
                                                    }">
        <div class="icon" :class="icon" :style="{width:size+'px',height:size+'px',fontSize:iconSize+'px'}"></div>
        <div class="label"><slot></slot></div>
    </router-link>
</template>

<script>

export default {
  name: 'NavItem',
  props:{
      icon : {
          type:String,
          default:''
      },
      link : {
          type:String,
          default:''
      },
      type : {
          type:String,
          default:''
      },
      size : {
          type:String,
          default:''
      },
      iconSize : {
          type:String,
          default:''
      },
      color : {
          type:String,
          default: ''
      },

  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'
.nav-item
  text-align: center
  display: block
  padding: 10px
  .icon
    line-height: 1
    margin: 0 auto
    color: inherit
    display: flex
    align-items: center
    justify-content: center
    font-size: 24px
  .label
    font-size: $font-sm
    color: $text-dark
    display: block
    line-height: 1
    margin-top: 5px
  &:nth-of-type(1)
    color: $red-light
  &:nth-of-type(2)
    color: $light-blue
  &:nth-of-type(3)
    color: $orange
  &:nth-of-type(4)
    color: $purple
  &:nth-of-type(5)
    color: $green
  &:nth-of-type(6)
    color: $pink
  &:nth-of-type(7)
    color: $blue
  &:nth-of-type(8)
    color: $red-light
  &:nth-of-type(9)
    color: $teal
  &:nth-of-type(10)
    color: $pink
  &:nth-of-type(11)
    color: $blue
  &:nth-of-type(12)
    color: $orange
  &:nth-of-type(13)
    color: $purple
  &:nth-of-type(14)
    color: $green
  &:nth-of-type(15)
    color: $red
  &.grey
    .icon
      color: $text-light !important
    .label
      color: $text-light !important
      transform: scale(0.85)
  &.circle
    .icon
      color: #fff
      width: 36px
      height: 36px
      border-radius: 50%
      font-size: 22px
      margin-bottom: 10px
    &:nth-of-type(1) .icon
      background-color: $red-light
    &:nth-of-type(2) .icon
      background-color: $light-blue
    &:nth-of-type(3) .icon
      background-color: $orange
    &:nth-of-type(4) .icon
      background-color: $purple
    &:nth-of-type(5) .icon
      background-color: $green
    &:nth-of-type(6) .icon
      background-color: $pink
    &:nth-of-type(7) .icon
      background-color: $blue
    &:nth-of-type(8) .icon
      background-color: $red-light
    &:nth-of-type(9) .icon
      background-color: $teal
    &:nth-of-type(10) .icon
      background-color: $pink
    &:nth-of-type(11) .icon
      background-color: $blue
    &:nth-of-type(12) .icon
      background-color: $orange
    &:nth-of-type(13) .icon
      background-color: $purple
    &:nth-of-type(14) .icon
      background-color: $green
    &:nth-of-type(15) .icon
      background-color: $red
    &.blue .icon
      background-color: $light-blue
    &.red .icon
      background-color: $primary
    &.green .icon
      background-color: $green
    &.orange .icon
      background-color: $orange
    &.purple .icon
      background-color: $purple
    &.pink .icon
      background-color: $pink
    &.teal .icon
      background-color: $teal
  &.plain
    .icon
      width: 36px
      height: 36px
      border-radius: 50%
      border: 1px solid
      font-size: 22px
      margin-bottom: 10px
    &.blue .icon
      border-color: $light-blue
      color: $light-blue
    &.red .icon
      border-color: $primary
      color: $primary
    &.green .icon
      border-color: $green
      color: $green
    &.orange .icon
      border-color: $orange
      color: $orange
    &.purple .icon
      border-color: $purple
      color: $purple
    &.pink .icon
      border-color: $pink
      color: $pink
    &.teal .icon
      border-color: $teal
      color: $teal
</style>
